<template>
    <div class="app-container">
        <!--<el-row
         :gutter="20"
         type="flex"
         justify="space-between"
         class="bg-white mb10 details-nav mg0"
      >
        <el-col :span="10" class="float-left details-nav-tit">
            <span>表名称：</span>
            <span class="details-nav-tit-text" v-show="!isBasciEdit">{{getDataBeseBasic.tableAlias|| '-'}}</span>
            <el-input v-show="isBasciEdit" placeholder="请输入内容" class="details-nav-tit-setInput" v-model="getDataBeseBasic.tableAlias"></el-input>
            <span class="nav-tit-operation-icon" @click="basciEditHanld">
               <svg aria-hidden="true" class="iconfont-icon">
                  <use xlink:href="#icon-edit"></use>
               </svg>
            </span>
             <span class="nav-tit-operation-icon" @click="basciSaveHanld">
               <svg aria-hidden="true" class="iconfont-icon">
                  <use xlink:href="#icon-edit"></use>
               </svg>
            </span>
            <svg-icon icon-class="edit" class="nav-tit-operation-icon"  @click="basciEditHanld" v-show="!isBasciEdit"/>
            <svg-icon icon-class="save2" class="nav-tit-operation-icon"  @click="basciSaveHanld" v-show="isBasciEdit"/>
            <svg-icon icon-class="exit2" class="nav-tit-operation-icon"   @click="basciExitHanld" v-show="isBasciEdit"/>

            <span class="nav-tit-operation-icon">
               <svg aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
               </svg>
            </span>
         </el-col>
         <el-row :span="5" :gutter="10" class="mg0" type="flex">
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  icon="el-icon-refresh-right"
                  size="mini"
                  @click="handleDelete"
                  v-hasPermi="['system:user:edit']"
                  >刷新</el-button
               >
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  icon="el-icon-tickets"
                  size="mini"
                  @click="handleApplyPermis"
                  >申请权限</el-button
               >
            </el-col>
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  icon="el-icon-tickets"
                  size="mini"
                  @click="handleQuit"
                  v-hasPermi="['system:user:remove']"
                  >退出</el-button
               >
            </el-col>
         </el-row>
      </el-row>-->

        <div class="mb10">
            <div
                class="map-all basis-text  app-left-width float-left  bg-white app-height"
            >
                <!--<div class="from-info details-nav-tit">
               <span>表名称：</span>
               <span class="details-nav-tit-text" v-show="!isBasciEdit">{{getDataBeseBasic.tableAlias|| '-'}}</span>
               <el-input v-show="isBasciEdit" placeholder="请输入内容" class="details-nav-tit-setInput" v-model="getDataBeseBasic.tableAlias"></el-input>
            </div>-->
                <div class="from-info  from-info-basis">
                    <el-popover
                        placement="right"
                        width="400"
                        popper-class="tip-from"
                        trigger="hover"
                    >
                        <div slot="reference">
                            <p class="title">基础信息</p>
                            <div class="from-info-item">
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表名称：</span>
                                    <span
                                        class="item-child-value"
                                        v-show="!isBasciEdit"
                                        >{{
                                            getDataBeseBasic.tableAlias || "-"
                                        }}</span
                                    >
                                    <input
                                        v-show="isBasciEdit"
                                        placeholder="请输入内容"
                                        class="item-child-input"
                                        v-model="getDataBeseBasic.tableAlias"
                                    />
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单名称(英):</span
                                    >
                                    <span
                                        class="item-child-value copy-content"
                                        id="databaseName2"
                                        >{{
                                            getDataBeseBasic.tableName || "-"
                                        }}</span
                                    >
                                    <!-- el-icon-document-copy -->
                                    <i
                                        class="el-icon-document-copy copy-icon"
                                        ref="copyContent2"
                                        @click="
                                            copy(
                                                'clipboard2',
                                                'copyContent2',
                                                'databaseName2'
                                            )
                                        "
                                    ></i>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >所属分类:</span
                                    >
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.dirPath || "-"
                                    }}</span>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单描述：</span
                                    >
                                    <span
                                        class="item-child-value"
                                        v-show="!isBasciEdit"
                                        >{{
                                            getDataBeseBasic.comment || "-"
                                        }}</span
                                    >
                                    <input
                                        class="item-child-input"
                                        v-model="getDataBeseBasic.comment"
                                        v-show="isBasciEdit"
                                        type="text"
                                    />
                                </div>
                            </div>
                        </div>
                        <!---el-popover 显示的内容--->
                        <div>
                            <p class="title reference-tit">基础信息</p>
                            <div class="from-info-item">
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表名称：</span>
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.tableAlias || "-"
                                    }}</span>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单名称(英):</span
                                    >
                                    <span
                                        class="item-child-value"
                                        id="databaseName"
                                        >{{
                                            getDataBeseBasic.tableName || "-"
                                        }}</span
                                    >
                                    <i
                                        class="el-icon-document-copy copy-icon"
                                        ref="copyContent"
                                        @click="
                                            copy(
                                                'clipboard',
                                                'copyContent',
                                                'databaseName'
                                            )
                                        "
                                    ></i>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >所属分类:</span
                                    >
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.dirPath || "-"
                                    }}</span>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit"
                                        >表单描述：</span
                                    >
                                    <span class="item-child-value">{{
                                        getDataBeseBasic.comment || "-"
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </el-popover>
                </div>
                <!---统计信息-->
                <div class="from-info from-info-statis">
                    <p class="title">统计信息</p>
                    <div class="from-info-item">
                        <div class="from-info-item-child">
                            <span class="item-child-tit">数据最近更新:</span>
                            <span cclass="item-child-value">{{
                                getDataBeseBasic.updateTime
                                    ? parseTime(
                                          new Date(getDataBeseBasic.updateTime)
                                      )
                                    : "-"
                            }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">表单创建时间:</span>
                            <span class="item-child-value">{{
                                getDataBeseBasic.createTime
                                    ? parseTime(
                                          new Date(getDataBeseBasic.createTime)
                                      )
                                    : "-"
                            }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">数据行数: </span>
                            <span class="item-child-value">{{
                                getDataBeseBasic.totalRows + "行" || "-"
                            }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">字段数量:</span>
                            <span class="item-child-value">{{
                                getDataBeseBasic.totalFields || "-"
                            }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">文件大小:</span>
                            <span class="item-child-value">{{
                                getDataBeseBasic.storeSize
                                    ? (
                                          getDataBeseBasic.storeSize /
                                          1024 /
                                          1024
                                      ).toFixed(2) + "Mb"
                                    : "-"
                            }}</span>
                        </div>
                    </div>
                </div>
                <!---权限信息-->
                <div class="from-info from-info-permi">
                    <p class="title">权限信息</p>
                    <div class="from-info-item">
                        <div class="from-info-item-child">
                            <span class="item-child-tit">安全等级:</span>
                            <span
                                class="item-child-value"
                                v-show="!isBasciEdit"
                                >{{ getDataBeseBasic.safeLevel }}</span
                            >
                            <el-select
                                v-model="getDataBeseBasic.safeLevel"
                                placeholder="请选择安全等级"
                                v-show="isBasciEdit"
                            >
                                <el-option
                                    v-for="(item, index) in safeLevelList"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">我的权限:</span>
                            <span class="item-child-value">{{
                                checkaccessType(getDataBeseBasic.accessType) ||
                                    "-"
                            }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">负责部门:</span>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                :content="getDataBeseBasic.deptName"
                                placement="top-start"
                            >
                                <span class="item-child-value">{{
                                    getDataBeseBasic.deptName || "-"
                                }}</span>
                            </el-tooltip>
                            <!-- <input class="item-child-input" v-show="isBasciEdit" type="text"  v-model="getDataBeseBasic.deptName">-->
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">负责人:</span>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                :content="getDataBeseBasic.managerName"
                                placement="top-start"
                            >
                                <span class="item-child-value">{{
                                    getDataBeseBasic.managerName || "-"
                                }}</span>
                            </el-tooltip>
                            <!--<span class="item-child-value">{{getDataBeseBasic.managerName || "-"}}</span>
                     <el-select v-model="getDataBeseBasic.managerName" placeholder="请选择负责人"  v-show="isBasciEdit" >
                        <el-option  v-for="(item,index) in userList" :key="index" :label="item.realName" :value="item.realName"></el-option>
                     </el-select>-->
                        </div>
                    </div>
                </div>
                <div class=" from-info basis-text-btn-list">
                    <el-button
                        type="primary"
                        size="mini"
                        v-show="
                            !isBasciEdit && getDataBeseBasic.accessType2 != 2
                        "
                        @click="basciEditHanld"
                        >编辑</el-button
                    >
                    <el-button
                        type="primary"
                        size="mini"
                        v-show="isBasciEdit"
                        @click="basciSaveHanld"
                        >保存</el-button
                    >
                    <el-button
                        size="mini"
                        v-show="isBasciEdit"
                        @click="basciExitHanld"
                        >取消</el-button
                    >
                </div>
            </div>
            <el-row
                :gutter="20"
                type="flex"
                style="margin-right:340px"
                class="app-height"
            >
                <el-col :span="24" class="map-container bg-white">
                    <div>
                        <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                        >
                            <el-menu-item index="dataView"
                                >数据预览</el-menu-item
                            >
                            <el-menu-item index="metaData"
                                >元数据信息</el-menu-item
                            >
                            <el-menu-item index="blood">血缘关系</el-menu-item>
                            <el-menu-item
                                index="updateRecord"
                                v-show="getDataBeseBasic.accessType"
                                >更新记录</el-menu-item
                            >
                            <!--<el-menu-item index="monitor">使用监控</el-menu-item>-->
                        </el-menu>
                        <div class="search-item">
                            <el-row :span="5" :gutter="10">
                                <el-col :span="1.5">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-refresh-right"
                                        size="mini"
                                        @click="handleUpdate"
                                        >刷新</el-button
                                    >
                                </el-col>
                                <el-col :span="1.5">
                                    <div v-if="getDataBeseBasic.concern">
                                        <el-popconfirm
                                            confirm-button-text="确定"
                                            cancel-button-text="不用了"
                                            icon="el-icon-info"
                                            icon-color="red"
                                            title="是否取消该表的关注"
                                            @confirm="handleApplyPermis"
                                        >
                                            <el-button
                                                type="primary"
                                                size="mini"
                                                slot="reference"
                                                ><i
                                                    class="iconfont icon-ego-heart"
                                                ></i
                                                >已关注</el-button
                                            >
                                        </el-popconfirm>
                                    </div>
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        v-if="!getDataBeseBasic.concern"
                                        @click="handleApplyPermis"
                                        ><i class="iconfont icon-ego-heart"></i
                                        >关注</el-button
                                    >
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button size="mini" @click="handleQuit">
                                        <i class="iconfont icon-tuichu"></i>
                                        退出
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div>
                        <dataView
                            v-if="activeIndex == 'dataView'"
                            ref="dataView"
                            :accessType="getDataBeseBasic.accessType"
                            :accessType2="getDataBeseBasic.accessType2"
                        />
                        <metaData
                            :isEdit="isEdit"
                            v-else-if="activeIndex == 'metaData'"
                            ref="metaData"
                            :accessType="getDataBeseBasic.accessType"
                            :accessType2="getDataBeseBasic.accessType2"
                        />
                        <blood
                            :isEdit="isEdit"
                            v-else-if="activeIndex == 'blood'"
                            ref="blood"
                        />
                        <updateRecord
                            :isEdit="isEdit"
                            v-else-if="
                                activeIndex == 'updateRecord' &&
                                    getDataBeseBasic.accessType == 5
                            "
                            ref="updateRecord"
                        />
                        <!--<monitor  v-else-if="activeIndex == 'monitor'" ref="monitor"/>-->
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<style lang="scss">
.tip-from {
    .title {
        padding: 0 0 10px 0;
        border-bottom: 1px solid #eee;
        margin: 0;
        display: flex;
        align-items: center;
        &::before {
            content: " ";
            display: inline-block;
            width: 4px;
            height: 21px;
            background: #1183f8;
            margin-right: 8px;
        }
    }
    .reference-tit {
        &::before {
            content: " ";
            display: inline-block;
            width: 4px;
            height: 21px;
            background: #fff;
            margin-right: 8px;
        }
    }
    .item-child-tit {
        display: inline-block;
        min-width: 106px;
        max-width: 106px;
    }
    .from-info-item-child {
        display: flex;
        padding: 20px 0 0 0;
        align-items: center;
        .copy-icon {
            cursor: pointer;
            margin-left: 10px;
        }
    }
}
.basis-text .el-select--medium .el-input__inner {
    width: 196px;
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/system/common.scss";
/**
    Element class start
  **/
.el-checkbox__input.is-checked + .el-checkbox__label {
    padding-right: 6px !important;
}
.el-col-5 {
    padding: 0;
}
.el-row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.el-menu--horizontal > .el-menu-item {
    height: 46px !important;
    line-height: 46px !important;
}
/**
    Element class end
  **/
.app-container {
    background: #f4f4f4;
    margin: 0 0 30px 0;
}
.mg0 {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
/***
头部信息和按钮 start
****/
.details-nav {
    overflow: hidden;
    height: 70px;
    line-height: 70px;
    .el-col {
        padding: 0;
    }
}
/***
头部信息和按钮 end
****/
.details-nav-tit {
    margin: 18px 0px 25px 20px;
    height: 36px;
    line-height: 36px;
    padding-bottom: 49px;
    .details-nav-tit-setInput {
        width: 200px;
    }
}

/***基础信息 start**/
.from-info {
    font-size: 14px;
    margin-bottom: 9px;
    &:last-child {
        margin: 0px;
    }
    .title {
        margin: 0 20px 10px 20px;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        &::before {
            content: " ";
            display: inline-block;
            width: 4px;
            height: 21px;
            background: #1183f8;
            margin-right: 8px;
        }
    }
    .from-info-item {
        margin: 0 20px;
    }
    .from-info-item-child {
        display: flex;
        // padding: 20px 0 0 0;
        margin-top: 4px;
        line-height: 34px;
        height: 34px;
        overflow: hidden;
        align-items: center;
        .copy-icon {
            cursor: pointer;
        }
    }
    .item-child-tit {
        display: inline-block;
        width: 106px;
    }
    .item-child-value {
        flex: 1;
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.basis-text-btn-list {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #eee;
    margin: 40px 20px 0 20px !important;
}
.item-child-input {
    width: 200px;
    border: 1px solid #dcdfe6;
    line-height: 30px;
    &:focus {
        outline: none;
    }
}
/***基础信息 end**/

/****
.operation {
   padding-bottom: 10px;
   .el-button--mini {
      height: 34px;
      width: 96px;
   }
   .select-more-handle {
      width: 106px;
   }
}
***/
.map-all {
    min-width: 340px;
    margin-right: 10px;
    padding: 0px !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 2px 6px 0 rgb(0 0 0 / 5%);
}
.map-container {
    padding: 0px 20px 16px 20px !important;
    position: relative;
    .search-item {
        position: absolute;
        top: 7px;
        right: 15px;
    }
}
</style>
<script>
import { listUser } from "@/api/system/user";
import {
    getDataBeseBasic,
    getDateViewList
} from "@/api/dataManagement/system/info";
import { setConcern } from "@/api/dataManagement/system/mydata";
import { typeList, safeLevelList } from "@/assets/js/fieldTypeList";
import Clipboard from "clipboard";
import dataView from "./details/dataView"; //  数据预览表格
import metaData from "./details/metaData"; // 元数据
import blood from "./details/blood"; //  血缘关系
import updateRecord from "./details/updateRecord"; //  更新记录
import monitor from "./details/monitor"; //  使用监控
export default {
    name: "mapDetails",
    components: { dataView, metaData, blood, updateRecord, monitor },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 预览表格数据
            DataViewList: null,
            // 弹出层标题
            title: "",
            // 表单参数
            form: {},
            getDataBeseBasic: "",
            userList: [],
            // 字段类型
            typeList,
            safeLevelList,
            accessType: "",
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 30,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined
            },
            // 视图模式
            viewModelOptions: [
                { dictLabel: "列表模式", dictValue: 1 },
                { dictLabel: "地图模式", dictValue: 2 }
            ],
            viewModelOptionsValue: "2",
            containerHeight: 0,
            activeIndex: "dataView",
            isEdit: false,
            isBasciEdit: false,
            tableId: "",
            clipboard: "",
            clipboard2: ""
        };
    },
    created() {
        this.getList();
        this.containerHeight = window.window.innerHeight - 116;
    },
    mounted() {
        this.tableId = this.$route.params.tableId;
        this.activeIndex = this.$route.query.metaData
            ? this.$route.query.metaData
            : "dataView";
        this.getbeseBasic();
        // this.getDataViewList()
        this.clipboard = new Clipboard(this.$refs.copyContent, {
            target: function() {
                return document.getElementById("databaseName");
            }
        });
        this.clipboard2 = new Clipboard(this.$refs.copyContent2, {
            target: function() {
                return document.getElementById("databaseName2");
            }
        });
    },
    methods: {
        /**
         * 获取数据方法 start
         * **/
        //查询用户列表
        getList() {
            this.loading = true;
            listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
                response => {
                    this.userList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }
            );
        },
        //  获取表基础信息
        getbeseBasic() {
            this.loading = true;
            getDataBeseBasic({ tableId: this.tableId }).then(res => {
                this.getDataBeseBasic = res.data;
                if (this.getDataBeseBasic.accessType > 2) {
                    this.getDataBeseBasic.accessType2 = 2;
                }
                this.loading = false;
            });
        },
        // 数据预览列表
        getDataViewList() {
            this.loading = true;
            getDateViewList({ tableId: this.tableId }).then(res => {
                // this.DataViewList = res.data;
                var dataJson = {
                    header: [
                        {
                            filedAlias: "filedAlias",
                            filedName: "filedName"
                        },
                        {
                            filedAlias: "filedAlias",
                            filedName: "filedName"
                        }
                    ],
                    list: [{}]
                };
                // this.total = res.total;
                // this.loading = false;
            });
        },
        //
        /****
         * 获取数据方法 end
         * **/

        // 基础信息编辑
        basciEditHanld() {
            this.isBasciEdit = true;
        },
        basciExitHanld() {
            this.isBasciEdit = false;
            this.getbeseBasic();
        },
        //基础信息保存
        basciSaveHanld() {
            let {
                comment,
                safeLevel,
                deptName,
                managerName
            } = this.getDataBeseBasic;
            this.getDataBeseBasic.updateTime = this.parseTime(new Date());
            getDataBeseBasic({
                methods: "post",
                tableId: this.tableId,
                data: this.getDataBeseBasic
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$message({
                        message: "编辑成功",
                        type: "success"
                    });
                    this.getbeseBasic();
                    this.isBasciEdit = false;
                }
            });
        },
        checkaccessType(type) {
            var val = "";
            this.typeList.forEach(item => {
                if (item.value == type) {
                    val = item.label;
                }
            });
            return val;
        },

        // 退出按钮
        handleQuit() {
            if (this.$route.query.changeTpe == "myView") {
                this.$router.push("/DMS/dataOverView/myView");
            } else {
                this.$router.push("/DMS/myData/mydata");
            }
        },
        handleEdit() {
            this.isEdit = true;
        },
        // 申请权限
        handleApplyPermis() {
            console.log(132);
            var text = "";
            if (this.getDataBeseBasic.concern) {
                text = "取消关注成功";
            } else {
                text = "关注成功";
            }
            var query = {
                tableId: this.tableId,
                concern: !this.getDataBeseBasic.concern
            };
            this.loading = true;
            setConcern(query).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: text,
                        type: "success"
                    });
                    this.loading = false;
                    this.getbeseBasic();
                }
            });
            // sessionStorage.setItem("selectList",JSON.stringify([this.getDataBeseBasic]))
            // this.$router.push("/DMS/myData/mydata/mapPermis?tableId="+this.tableId);
        },
        //基础信息 表名复制
        copy(val, _ref, id) {
            var that = this;
            that[val].on("success", e => {
                // 释放内存
                // this.$message.success('复制成功');
                that.$message({
                    message: "复制成功",
                    type: "success"
                });
                that[val].destroy();
            });
            that[val].on("error", () => {
                alert("不支持此浏览器");
                console.log("clipboard");
                // 释放内存
                that[val].destroy();
            });
            that[val] = new Clipboard(that.$refs[_ref], {
                target: function() {
                    return document.getElementById(id);
                }
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.userId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 删除按钮操作 */
        handleUpdate(row) {
            if (this.activeIndex == "dataView") {
                this.$refs.dataView.updataHandle();
            }
            if (this.activeIndex == "metaData") {
                this.$refs.metaData.updataHandle();
            }
            if (this.activeIndex == "blood") {
                this.$refs.blood.updataHandle();
            }
            if (this.activeIndex == "updateRecord") {
                this.$refs.updateRecord.updataHandle();
            }
            if (this.activeIndex == "monitor") {
                this.$refs.monitor.updataHandle();
            }
        },
        // 表格导航切换
        handleSelect(index, indexPath) {
            /****
             * monitor 使用监控
             * updateRecord 更新记录
             * blood 血缘关系
             * metaData 元数据信息
             * dataView 数据预览
             * ****/
            if (this.$route.query.metaData) {
                this.$router.push({
                    path:
                        "/DMS/dataMap/mapDirectory/details/" +
                        this.$route.params.tableId +
                        "?dirId=" +
                        this.$route.query.dirId
                });
            }
            this.activeIndex = index;
        }
    }
};
</script>
